<template>
  <div class="login-page">
    <!-- 顶部返回按钮 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M15 18L9 12L15 6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>

    <!-- 品牌区域 -->
    <div class="brand-section">
      <div class="logo">
        <div class="logo-text">TC</div>
      </div>
      <div class="brand-name">同程旅行</div>
    </div>


    <!-- 登录方式切换 -->
    <div class="login-type-tabs">
      <div class="tab-item" :class="{ active: loginType === 'phone' }" @click="switchLoginType('phone')">
        手机号登录
      </div>
      <div class="tab-item" :class="{ active: loginType === 'password' }" @click="switchLoginType('password')">
        账号密码登录
      </div>
    </div>

    <!-- 手机号输入区域 -->
    <div class="phone-input-section" v-if="loginType === 'phone'">
      <div class="phone-input-container">
        <div class="country-code">
          <span class="code-text">+86</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M3 4.5L6 7.5L9 4.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <input 
          type="tel" 
          class="phone-input" 
          placeholder="请输入手机号"
          v-model="phoneNumber"
          maxlength="11"
        />
      </div>
    </div>

    <!-- 账号密码输入区域 -->
    <div class="password-input-section" v-if="loginType === 'password'">
      <div class="input-container">
        <input 
          type="text" 
          class="account-input" 
          placeholder="请输入手机号/邮箱/用户名"
          v-model="account"
        />
      </div>
      <div class="input-container">
        <input 
          :type="showPassword ? 'text' : 'password'" 
          class="password-input" 
          placeholder="请输入密码"
          v-model="password"
        />
        <div class="password-toggle" @click="togglePasswordVisibility">
          <svg v-if="showPassword" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" stroke="#999" stroke-width="1.5"/>
            <path d="M10 15C13.866 15 17 10 17 10C17 10 13.866 5 10 5C6.13401 5 3 10 3 10C3 10 6.13401 15 10 15Z" stroke="#999" stroke-width="1.5"/>
          </svg>
          <svg v-else width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.5 2.5L17.5 17.5M8.5 8.5C7.5 9.5 7.5 11.5 8.5 12.5C9.5 13.5 11.5 13.5 12.5 12.5M8.5 8.5C9.5 7.5 11.5 7.5 12.5 8.5C13.5 9.5 13.5 11.5 12.5 12.5M8.5 8.5L12.5 12.5M15.5 15.5C16.5 14.5 16.5 12.5 15.5 11.5C14.5 10.5 12.5 10.5 11.5 11.5M15.5 15.5C14.5 16.5 12.5 16.5 11.5 15.5C10.5 14.5 10.5 12.5 11.5 11.5M15.5 15.5L11.5 11.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 隐私政策同意 -->
    <div class="privacy-section">
      <div class="checkbox-container" @click="togglePrivacyAgreement">
        <div class="checkbox" :class="{ checked: privacyAgreed }">
          <svg v-if="privacyAgreed" width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="privacy-text">
          已阅读并同意
          <span class="link">《同程旅行隐私政策》</span>
          和
          <span class="link">《用户服务协议》</span>
        </span>
      </div>
    </div>

    <!-- 登录按钮 -->
    <div class="login-section">
      <button 
        class="login-btn" 
        :class="{ disabled: !canLogin }"
        :disabled="!canLogin"
        @click="handleLogin"
      >
        {{ loginType === 'phone' ? '获取验证码' : '登录' }}
      </button>
    </div>

    <!-- 其他选项 -->
    <div class="login-options">
      <span class="option-link" @click="goToQuickRegister">快速注册</span>
      <span class="divider">|</span>
      <span class="option-link" @click="goToForgotPassword">忘记密码</span>
    </div>

    <!-- 第三方登录 -->
    <div class="third-party-section">
      <div class="divider-line"></div>
      <div class="third-party-title">其他登录方式</div>
      <div class="third-party-icons">
        <div class="third-party-item" @click="loginWithDingding">
          <div class="icon dingding-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="white"/>
            </svg>
          </div>
        </div>
        <div class="third-party-item" @click="loginWithQQ">
          <div class="icon qq-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="white"/>
            </svg>
          </div>
        </div>
        <div class="third-party-item" @click="loginWithWechat">
          <div class="icon wechat-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M8.5 12C8.5 9.5 10.5 7.5 13 7.5C15.5 7.5 17.5 9.5 17.5 12C17.5 14.5 15.5 16.5 13 16.5C12.2 16.5 11.5 16.2 11 15.7L8.5 17.5V15.2C8.5 13.7 8.8 12.3 8.5 12Z" fill="white"/>
              <path d="M6.5 15.5C6.5 13 8.5 11 11 11C12.8 11 14.3 12.2 15 13.7L17.5 12V14.3C17.5 16.8 15.5 18.8 13 18.8C11.2 18.8 9.7 17.6 9 16.1L6.5 17.9V15.5Z" fill="white"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const loginType = ref('phone') // 'phone' 或 'password'
const phoneNumber = ref('')
const account = ref('')
const password = ref('')
const showPassword = ref(false)
const privacyAgreed = ref(false)

// 计算属性
const canLogin = computed(() => {
  if (loginType.value === 'phone') {
    return phoneNumber.value.length === 11 && privacyAgreed.value
  } else {
    return account.value.length > 0 && password.value.length > 0 && privacyAgreed.value
  }
})

// 方法
const goBack = () => {
  router.go(-1)
}

const switchLoginType = (type) => {
  loginType.value = type
  // 清空输入内容
  phoneNumber.value = ''
  account.value = ''
  password.value = ''
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const togglePrivacyAgreement = () => {
  privacyAgreed.value = !privacyAgreed.value
}

const handleLogin = () => {
  if (!canLogin.value) return
  
  if (loginType.value === 'phone') {
    console.log('获取验证码:', phoneNumber.value)
    // 这里可以调用API获取验证码
  } else {
    console.log('账号密码登录:', { account: account.value, password: password.value })
    // 这里可以调用API进行账号密码登录
  }
}

const goToQuickRegister = () => {
  console.log('跳转到快速注册')
  // 这里可以跳转到注册页面
}

const goToForgotPassword = () => {
  console.log('跳转到忘记密码')
  // 这里可以跳转到忘记密码页面
}

const loginWithDingding = () => {
  console.log('钉钉登录')
  // 跳转到钉钉授权页面，添加types参数
  window.location.href = 'http://localhost:8000/user/dingtalk/auth?types=dingding'
}

const loginWithQQ = () => {
  console.log('QQ登录')
  // 跳转到QQ授权页面，添加types参数
  window.location.href = 'http://localhost:8000/user/dingtalk/auth?types=qq'
}

const loginWithWechat = () => {
  console.log('微信登录')
  // 跳转到微信授权页面，添加types参数
  window.location.href = 'http://localhost:8000/user/dingtalk/auth?types=wechat'
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0 20px;
  position: relative;
}

/* 顶部返回按钮 */
.header {
  padding-top: 20px;
  padding-bottom: 10px;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 品牌区域 */
.brand-section {
  text-align: center;
  margin: 40px 0 30px 0;
}

.logo {
  margin-bottom: 15px;
}

.logo-text {
  font-size: 32px;
  font-weight: bold;
  color: #1890FF;
  background: linear-gradient(135deg, #1890FF, #40A9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-name {
  font-size: 18px;
  font-weight: 500;
  color: #1890FF;
}

/* 登录方式切换 */
.login-type-tabs {
  display: flex;
  margin-bottom: 30px;
  background-color: #F5F5F5;
  border-radius: 8px;
  padding: 4px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #1890FF;
  color: white;
  font-weight: 500;
}

/* 手机号输入区域 */
.phone-input-section {
  margin-bottom: 20px;
}

/* 密码输入区域 */
.password-input-section {
  margin-bottom: 20px;
}

.input-container {
  position: relative;
  margin-bottom: 16px;
}

.input-container:last-child {
  margin-bottom: 0;
}

.account-input,
.password-input {
  width: 100%;
  height: 56px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  color: #333;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.3s ease;
}

.account-input:focus,
.password-input:focus {
  border-color: #1890FF;
}

.account-input::placeholder,
.password-input::placeholder {
  color: #A0AEC0;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0 16px;
  background-color: #ffffff;
  height: 56px;
}

.country-code {
  display: flex;
  align-items: center;
  margin-right: 12px;
  cursor: pointer;
}

.code-text {
  font-size: 16px;
  color: #333;
  margin-right: 4px;
}

.phone-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
  background: transparent;
}

.phone-input::placeholder {
  color: #A0AEC0;
}

/* 隐私政策同意 */
.privacy-section {
  margin-bottom: 30px;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #CBD5E0;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox.checked {
  background-color: #1890FF;
  border-color: #1890FF;
}

.privacy-text {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.5;
}

.link {
  color: #1890FF;
  text-decoration: underline;
}

/* 登录按钮 */
.login-section {
  margin-bottom: 30px;
}

.login-btn {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #40A9FF, #1890FF);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #1890FF, #096DD9);
  transform: translateY(-1px);
}

.login-btn.disabled {
  background: #E2E8F0;
  color: #A0AEC0;
  cursor: not-allowed;
}

/* 其他登录选项 */
.login-options {
  text-align: center;
  margin-bottom: 40px;
}

.option-link {
  font-size: 14px;
  color: #1890FF;
  cursor: pointer;
  text-decoration: underline;
}

.divider {
  margin: 0 12px;
  color: #CBD5E0;
}

/* 第三方登录 */
.third-party-section {
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
}

.divider-line {
  height: 1px;
  background-color: #E2E8F0;
  margin-bottom: 20px;
}

.third-party-title {
  text-align: center;
  font-size: 14px;
  color: #A0AEC0;
  margin-bottom: 20px;
}

.third-party-icons {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.third-party-item {
  cursor: pointer;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.icon:hover {
  transform: scale(1.1);
}

.dingding-icon {
  background-color: #0089FF;
}

.qq-icon {
  background-color: #12B7F5;
}

.wechat-icon {
  background-color: #07C160;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .login-page {
    padding: 0 16px;
  }
  
  .third-party-icons {
    gap: 30px;
  }
  
  .icon {
    width: 44px;
    height: 44px;
  }
}
</style>